<title>修改房东</title>
@extends('admin.common.main')
<!-- webupload上传样式 -->
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
@section('html')
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 房东管理
        <span class="c-gray en">&gt;</span> 修改房东
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="page-container">
        <form action="{{ route('admin.fangowner.update',$fangowner) }}" id="form-member-add" method="post" class="form form-horizontal">
            @method('PUT')
            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>姓名：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="name" value="{{ $fangowner->name }}" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>年龄：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="age" value="{{ $fangowner->age }}" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机号码：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="phone" value="{{ $fangowner->phone }}" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="email" class="input-text" name="email" value="{{ $fangowner->email }}" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证号码：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="card" value="{{ $fangowner->card }}" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>地址：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="address" value="{{ $fangowner->address }}" />
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
                <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                   <div class="radio-box">
                        <input type="radio" name="sex" value="男" @if($fangowner->sex == "男") checked @endif>
                        <label for="sex-1">男</label>
                   </div>
                   <div class="radio-box">
                        <input type="radio" name="sex" value="女" @if($fangowner->sex == "女") checked @endif>
                        <label for="sex-2">女</label>
                   </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证照片：</label>
                <div class="formControls col-xs-2 col-sm-2">
                   <div id="picker">身份证照片</div>
                   <span>正面、反面、手持</span>
                </div>
                <div class="formControls col-xs-6 col-sm-7">
                   <!-- 表单提交时，上传图片地址，以#隔开 -->
                   <input type="hidden" name="pic" id="pic" />
                   <!-- 显示上车点成功后的图片容器 -->
                   <div id="imgList"></div>
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="添加房东" /> 
                </div>
            </div>
        </form>
    </article>
@endsection
@section('js')
    <!-- webupload上传js -->
    <script type="text/javascript" src="/webuploader/webuploader.js"></script>
    <script type="text/javascript">
        // 初始化 Web Uploadervar 
        uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '/webuploader/Uploader.swf',
            // 文件接收服务端 上传PHP的代码
            server: '{{ route('admin.fangowner.upfile') }}',
            // 文件上传时携带参数
            formData:{
                _token:'{{csrf_token()}}'
            },
            // 文件上传的表单名称
            fileVal:'file',
            // 选择文件的按钮
            pick: {
               id:'#picker',
               // 是否开启选择多个文件的能力
               multiple:true,
            },
            // 压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: true
        });
        // 上传成功时的回调方法
        uploader.on( 'uploadSuccess', function( file,ret ) {
           // 表单提交时，图片路径以#隔开
           let val = $('#pic').val();
           let tmp = val + '#' + ret.url;
           $('#pic').val(tmp);
           showImg(ret.url);       
        });

        // 图片显示方法
        function showImg(url){
           // 图片显示
           var imglist = $('#imgList');
           // 注：一定要用追加而不是html覆盖
           var html = `<div style="position:relative;height:260px;float:left">
                            <img src='${url}' style="height:260px;" />
                            <strong onclick="delpic(this,'${url}')" style="position:absolute;right:0;top:-17px;color:#ccc;font-size:30px">x</strong>  
                      </div>`;
            imglist.append(html);
        }

        // 修改房东列表显示图片
        // 赋值图片路径
        let picStr = "{{ $fangowner->pic }}";
        $('#pic').val(`#${picStr}`);
        // 显示图片
        let picArr = picStr.split('#');
        picArr.forEach((pic)=>{
            if(pic) showImg(pic);
        });
        // 删除图片
        function delpic(obj,picurl){
            let url = "{{ route('admin.fangowner.delfile') }}?file=" + picurl;
            // 发起请求删除
            fetch(url);
            // 删除当前点击图片显示
            $(obj).parent().remove();
            // 修改隐藏域表单
            $('#pic').val($('#pic').val().replace(`#${picurl}`,''));
        };

        // 前端表单验证
        // https://www.runoob.com/jquery/jquery-plugin-validate.html
        $("#form-member-add").validate({
            // 规则
            rules: {
                // 表单元素名称
                name: {
                    // 验证规则
                    required: true
                },
                // 表单元素名称
                card: {
                    // 验证规则
                    required: true
                },
                // 表单元素名称
                email: {
                    // 验证规则
                    required: true,
                    email:true
                },
                // 表单元素名称
                phone: {
                    // 验证规则
                    required:true,
                    number:true,
                    rangelength:[11,11]
                },
            },
            // 取消键盘事件
            onkeyup: false,
            // 验证成功后的样式
            success: "valid",
            // 验证通过后，处理的方法 form dom对象
            submitHandler: function (form) {
                // 表单提交
                form.submit();
            }
        });

      // 单选框样式
      $('.skin-minimal input').iCheck({
        checkboxClass: 'icheckbox-blue',
        radioClass: 'iradio-blue',
        increaseArea: '20%'
      });
    </script>
@endsection


